<template>
  <div>
    <div class="info">
      <el-card class="box-card animate__animated animate__lightSpeedInLeft">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <table border="1px" cellspacing="0" align="left" height="36px">
          <tr>
            <td>订单状态</td>
            <td>{{orderDetailInfo.zhuangtai ? '已发货' : '待发货'}}</td>
          </tr>
          <tr>
            <td>结算状态</td>
            <td>待结算</td>
          </tr>
          <tr>
            <td>订单编号</td>
            <td>{{orderDetailInfo.dingdanhao}}</td>
          </tr>
          <tr>
            <td>支付下单时间</td>
            <td>{{orderDetailInfo.maijiagoumaishijian}}</td>
          </tr>
          <tr>
            <td>买家微信</td>
            <td>{{orderDetailInfo.maijiaweixin}}</td>
          </tr>
          <tr>
            <td>联系方式</td>
            <td>15858580505</td>
          </tr>
        </table>
      </el-card>
      <el-card class="box-card animate__animated animate__lightSpeedInLeft">
        <div slot="header" class="clearfix">
          <span>购买详情</span>
        </div>
        <table
          class="table2"
          border="1px"
          cellspacing="0"
          align="center"
          height="36px"
        >
          <tr>
            <th>货品</th>
            <th>货品信息</th>
            <th>系统单价</th>
            <th>数量</th>
            <th>运费金额</th>
            <th>实际付款</th>
            <th>支付时间</th>
          </tr>
          <tr>
            <td>
              <img :src="orderDetailInfo.imag" alt="" />
            </td>
            <td>{{orderDetailInfo.xinxi}}</td>
            <td>{{orderDetailInfo.jiage}}元</td>
            <td>{{orderDetailInfo.dingdanshuliang}}</td>
            <td>5元</td>
            <td>{{orderDetailInfo.jiage}}元</td>
            <td>{{orderDetailInfo.maijiagoumaishijian}}</td>
          </tr>
        </table>
      </el-card>
      <el-card class="box-card animate__animated animate__lightSpeedInLeft">
        <div slot="header" class="clearfix">
          <span>收件人/收件人信息</span>
        </div>
        <table border="1px" cellspacing="0" align="left" height="36px">
          <tr>
            <td>收货人</td>
            <td>{{orderDetailInfo.maijiayonghuming}}</td>
          </tr>
          <tr>
            <td>收获地址</td>
            <td>{{orderDetailInfo.shouhuodizhi}}</td>
          </tr>
          <tr>
            <td>联系方式</td>
            <td>15858580505</td>
          </tr>
        </table>
      </el-card>
      <el-card class="box-card animate__animated animate__lightSpeedInLeft">
        <div slot="header" class="clearfix">
          <span>快递信息</span>
        </div>
        <table border="1px" cellspacing="0" align="left" height="36px">
          <tr>
            <td>快递公司</td>
            <td>德邦快递</td>
          </tr>
          <tr>
            <td>快递单号</td>
            <td>9873151552</td>
          </tr>
          <tr>
            <td>发货时间</td>
            <td>2019-05-05 19:20:26</td>
          </tr>
          <tr>
            <td>快递明细</td>
            <td>
              <div class="kuai">
                <p>2019-05-07 20:58:50</p>
                <p>揽货成功，【揭阳市】营业网点库存中</p>
              </div>
              <div class="kuai">
                <p>2019-05-07 20:58:50</p>
                <p>揽货成功，【揭阳市】营业网点库存中</p>
              </div>
              <div class="kuai">
                <p>2019-05-07 20:58:50</p>
                <p>揽货成功，【揭阳市】营业网点库存中</p>
              </div>
              <div class="kuai">
                <p>2019-05-07 20:58:50</p>
                <p>揽货成功，【揭阳市】营业网点库存中</p>
              </div>
              <div class="kuai">
                <p>2019-05-07 20:58:50</p>
                <p>揽货成功，【揭阳市】营业网点库存中</p>
              </div>
              <div class="kuai">
                <p>2019-05-07 20:58:50</p>
                <p>揽货成功，【揭阳市】营业网点库存中</p>
              </div>
              <div class="kuai">
                <p>2019-05-07 20:58:50</p>
                <p>揽货成功，【揭阳市】营业网点库存中</p>
              </div>
              <div class="kuai">
                <p>2019-05-07 20:58:50</p>
                <p>揽货成功，【揭阳市】营业网点库存中</p>
              </div>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState("indent", ["orderDetailInfo"]),
  },
};
</script>

<style lang="scss" scoped>
.info {
  margin-top: 75px;
}
.box-card {
  line-height: 1;
}
table {
  border-color: rgb(243, 241, 241);
}
table > tr > td {
  line-height: 36px;
  font-size: 12px;
  color: rgb(23, 28, 73);
  text-align: left;
  padding-left: 15px;
  border-color: rgb(233, 233, 233);
}
table > tr > td:nth-of-type(1) {
  width: 130px;
}
table > tr > td:nth-of-type(2) {
  width: 500px !important;
}
table {
  margin: 0 10px 30px 20px;
}
.table2 > tr > td:nth-of-type(2) {
  width: 134px !important;
}
.table2 > tr > td:nth-of-type(1) {
  width: 120px !important;
}
.table2 > tr > td {
  min-width: 134px;
  height: 101px;
  text-align: center;
  img {
    width: 84px;
    height: 83px;
    margin: 0 auto;
  }
  p{
    line-height: 18px;
    font-size: 14px;
    margin-top: 30px;
    text-align: left;
    margin-left: 5px;
  }
}
.table2 > tr > th {
  line-height: 36px;
}
.clearfix {
  text-align: left;
  color: rgb(23, 28, 73);
  font-weight: 700;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 80vw;
}
.kuai {
  margin: 15px 0;
  p {
    font-size: 12px;
    line-height: 1;
    margin: 0;
  }
}
</style>